import React from "react";
import { connect, useDispatch, useSelector } from "react-redux";
import { Creators as ArticleCreators } from "redux/actions/article";
import { Creators as AskCreators } from "redux/actions/ask";
import { END } from "redux-saga";
// nodejs library that concatenates classes
import classNames from "classnames";
// core components
import NavPills from "components/NavPills/NavPills.js";
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";
import Button from "components/CustomButtons/Button.js";
import Instruction from "components/Instruction/Instruction.js";
import Card from "components/Card/Card.js";
import CardHeader from "components/Card/CardHeader.js";
import CardBody from "components/Card/CardBody.js";
import CustomInput from "components/CustomInput/CustomInput.js";
import CustomFileInput from "components/CustomFileInput/CustomFileInput.js";
import InfoArea from "components/InfoArea/InfoArea.js";
import Accordion from "components/Accordion/Accordion.js";
import ImageUpload from "components/CustomUpload/ImageUpload.js";
import InputAdornment from "@material-ui/core/InputAdornment";

// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";

import pricingStyle from "assets/jss/nextjs-material-kit-pro/pages/pricingSections/pricingStyle.js";
import { getCookie } from "redux/api/cookie";
import "codemirror/lib/codemirror.css";
import "@toast-ui/editor/dist/toastui-editor.css";
import MDEditor from "pages-components/Editor";

const useStyles = makeStyles(pricingStyle);

function SectionWrite({ token, articleError, askError }) {
  const [message, setMessage] = React.useState("");
  const [error, setError] = React.useState("");
  const [content, setContent] = React.useState("");
  const handleChange = (e) => {
    console.log("content change:", e);
    setContent(e);
  };

  let valueObj = { title: "" };
  const [inputValues, setInputValues] = React.useState(valueObj);
  // const error = useSelector((state) => state.articlePublish.error);

  const classes = useStyles();
  const dispatch = useDispatch();

  const handleInputChange = (e) => {
    const { id, value } = e.target;
    console.log("handleInputChange===>", id, value);

    setInputValues({ ...inputValues, [id]: value });
  };

  const handleSubmit = (e, val) => {
    e.preventDefault();
    // console.log(e, val);
    // console.log(inputValues);
    // console.log("props.token", token);

    if (!inputValues.title || inputValues.title.length <= 6) {
      setMessage("请输入标题");
      return;
    }
    console.log(content, content.length);
    if (!content || content.length <= 7 || content === "请输入正文内容") {
      setMessage("请输入内容");
      return;
    }

    if (!token) {
      setMessage("未登录");
      return;
    }

    if (val === "article") {
      console.log("发布文章");
      dispatch(
        ArticleCreators.publishRequest({
          token: token,
          title: inputValues.title,
          content: content,
        })
      );
      setError(articleError);
    } else if (val === "ask") {
      console.log("发布问题");
      dispatch(
        AskCreators.publishRequest({
          token: token,
          title: inputValues.title,
          content: content,
        })
      );
      setError(askError);
    }
    setMessage("");
  };
  return (
    <div className={classes.pricingSection}>
      <GridContainer>
        <GridItem md={12} sm={12}>
          <form className={classes.form} onSubmit={handleSubmit}>
            <CustomInput
              id="title"
              labelText="请输入标题..."
              onChange={handleInputChange}
              formControlProps={{
                fullWidth: true,
                className: classes.customFormControlClasses,
              }}
            />

            <MDEditor token={token} onChange={handleChange} />

            <div className={classes.textCenter}>
              <Button
                round
                color="primary"
                type="submit"
                onClick={(e) => {
                  handleSubmit(e, "article");
                }}
              >
                发布文章
              </Button>
              <Button
                round
                color="primary"
                type="submit"
                onClick={(e) => {
                  handleSubmit(e, "ask");
                }}
              >
                发布问题
              </Button>
            </div>
            {message && (
              <p style={{ color: "red", textAlign: "center" }}>{message}</p>
            )}
            {error && (
              <p style={{ color: "red", textAlign: "center" }}>{error}</p>
            )}
          </form>
        </GridItem>
      </GridContainer>
    </div>
  );
}

const mapStateToProps = (state) => ({
  articleError: state.articlePublish.error,
  askError: state.askPublish.error,
});

const mapDispatchToProps = {};
export default connect(mapStateToProps, mapDispatchToProps)(SectionWrite);
